<!DOCTYPE html>
<html>
<head>
	<title>我的排名</title>
	<link rel="stylesheet" type="text/css" href="./statics/style/public.css">
	<link rel="stylesheet" type="text/css" href="./statics/style/achievement.css">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style type="text/css">
		.rankCont .achievement .reading span{
			margin: 0 !important;
		}
		.rankCont .achievement .reading {
			margin-left: 0;
			display: flex;
			flex-direction: column;
			align-items: center !important;
			justify-content: center;
		}
		.splitline 
		{
			border-right: 1px solid #eee;
		}
		.ranks {
			margin-top: 7px;
			width: 100%;
			min-height: 216px;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			border-radius: 3px;
		}
		.rankTitle {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			line-height: 28px;
			border-bottom: 1px solid #eee;
		}
		.rankTitle p {
			min-width: 34px;
			font-size: 16px;
		}
		.coins {
			width: 48px;
			text-align: center;
		}
		.singleRank {
			width: 100%;
			height: 54px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 16px;
		}
		.singleRank .number {
			width: 17px;
			height: 17px;
			line-height: 17px;
		}
		.singleRank .avator {
			width: 34px;
			height: 28px;
			border-radius: 14px;
			text-align: center;
		}
		.avator img {
			width: 28px;
		}
		.singleRank p {
			min-width: 34px;
			text-align: center;
		}
		.singleRank .times {
			width: 64px;
			text-align: center;
		}
		.singleRank .first {
			background: url("./statics/img/rank/1.png") no-repeat center;
			color: #fff;
		}
		.singleRank .second {
			background: url("./statics/img/rank/2.png") no-repeat center;
			color: #fff;
		}
		.singleRank .third {
			background: url("./statics/img/rank/3.png") no-repeat center;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="mainContent">
		<div class="mainContBody rankCont">
			<div class="userInfo">
				<img src="./statics/img/achievement/avator.png" class="avator">
				<span>
					小爱同学
				</span>
				<span>学号： 阿初567</span>
			</div>
			<div class="achievement">
				<div class="reading">
					<p>排名</p>
					<span>6</span>
				</div>
				<div class="reading splitline">
					<p>金币</p>
					<span>6</span>
				</div>
				<div class="reading splitline">
					<p>打卡天数</p>
					<p><span>6</span>天</p>
				</div>
				<div class="reading">
					<p>阅读天数</p>
					<p><span>6</span>天</p>
				</div>
			</div>
			<div class="ranks">
				<div class="rankTitle">
					<p>排名</p>
					<p>昵称</p>
					<p class="coins">金币</p>
					<p>阅读天数</p>
					<p>打卡天数</p>
				</div>
				<div class="singleRank">
					<p class="number first">1</p>
					<p class="avator"><img src="./statics/img/rank/avator.png" class=""></p>
					<p class="coins">300</p>
					<p class="times">7</p>
					<p class="times">5</p>
				</div>
				<div class="singleRank">
					<p class="number second">1</p>
					<p class="avator"><img src="./statics/img/rank/avator.png" class=""></p>
					<p class="coins">300</p>
					<p class="times">7</p>
					<p class="times">5</p>
				</div>
				<div class="singleRank">
					<p class="number third">1</p>
					<p class="avator"><img src="./statics/img/rank/avator.png" class=""></p>
					<p class="coins">300</p>
					<p class="times">7</p>
					<p class="times">5</p>
				</div>
				<div class="singleRank">
					<p class="number">4</p>
					<p class="avator"><img src="./statics/img/rank/avator.png" class=""></p>
					<p class="coins">300</p>
					<p class="times">7</p>
					<p class="times">5</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>